import "./style.scss"; // 样式文件
import "../commom/common.scss"; // 公共样式
import { $, $all } from "../utils/util.js"; //工具函数
import random from "../random/random.js"; //随机数函数

// import Swiper from 'swiper/bundle' // swiper 轮播图js
// import 'swiper/css/bundle' // swiper 的 css 文件

import { getInterface } from "../service";

async function init() {
  const res = await getInterface("/personalized")
    // console.log(res)
    .then((res) => {
      // console.log(res)
      // const data = res.data.result //.slice(0 , 6)

      const data = [...res.data.result]; // 创建数组副本
      const randomData = [];

      // 随机从数组中取出6个元素
      for (let i = 0; i < 6 && data.length > 0; i++) {
        const randomIndex = random(0, data.length - 1); // 直接调用random函数
        randomData.push(data.splice(randomIndex, 1)[0]);
      }

      $(".nr").innerHTML = randomData
        .map(
          (item) => `
        <div class="one">
          <div>
              <img src="${item.picUrl}" alt="">
              <!-- 播放量 -->
              <p><span>${Math.round(item.playCount / 10000)}</span>万</p>
          </div>
          <p>${item.name}</p>
        </div>
      `,
        )
        .join("");

      // 给one绑定点击事件
      $all(".one").forEach((item, index) => {
        item.addEventListener("click", function () {
          // 跳转到详情页面并且将id传过去
          location.href = `./detail.html?id=${data[index].id}`;
        });
      });
    });
}
init();

// 给搜索绑定点击事件
$(".search").addEventListener("click", function () {
  // 跳转到搜索页面
  window.location.href = "./search.html";
});

// 给

// 打印信息, 便于观察是否将该js文件打包
// console.log(`%c这是首页`, 'color: red; font-size: 30px;')

//利用事件委托给nav绑定点击事件
$("nav").addEventListener("click", function (e) {
  if (e.target.tagName === "SPAN") {
    // console.log(e.target)
    // 给span绑定点击事件, 点击后给sapn添加show类名, 其他的移除show类名
    $all("span").forEach((item) => {
      item.classList.remove("show");
    });
    e.target.classList.add("show");
  }
});
